<template>
  <div class="logins">
    <el-container class="div-container">
      <el-header class="div-header">
        <div class="header_box">
          <div class="div-header-item">
            <img src="../../../assets/images/usoft.jpg" class="image-rows" />
            <div class="div-header-item-div" style="width: 900px; position: relative">
              <span style="display: inline-block">文嘟嘟 | 选择店铺 </span>
              <span style="
                  font-size: 12px;
                  display: inline-block;
                ">
                +86-{{ userInfo.phonenumber }}
                <el-link style="
                    font-size: 12px;
                    position: relative;
                    top: -2px;
                    right: -5px;
                  " type="primary" @click="layout">
                  退出</el-link>
              </span>
            </div>
          </div>
        </div>
      </el-header>
      <el-main class="main_box">
        <div class="main-one">
          <div>
            <el-image style="display: inline-block;width: 40px;height: 40px" v-if="userInfo.avatar != null && userInfo.avatar != ''"
              slot="reference" :src="userInfo.avatar" :preview-src-list="[userInfo.avatar]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div style="
                display: inline-block;
                margin-left: 12px;
                margin-top: 5px;
                position: relative;
                top: -5px;
                color: #666;
                font-size: 14px;
              ">
              <div>
                {{ userInfo.userName }}
              </div>
              <div style="font-size: 12px">+86-{{ userInfo.phonenumber }}</div>
            </div>
          </div>
          <!--  <a style="font-size: 14px;position: relative;right: -10px;top: -4.9px;">设置</a>-->
          <el-button type="primary" size="small" @click="addss">创建店铺</el-button>

        </div>
        <div class="main-two">
          <div>
            <el-tabs v-model="activeName" tab-position="left">
              <el-tab-pane label="所有店铺" name="all" class="store_list" v-if="templateCode.length > 0">
                <showInfo :mainCategory="activeName"></showInfo>
              </el-tab-pane>

              <el-tab-pane :label="dict.dictLabel" :name="dict.dictLabel" class="store_list" v-for="dict in templateCode"
                :key="dict.dictLabel">
                <showInfo :mainCategory="tabCodes"></showInfo>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-main>
      <div class="el-login-footer" align="center">
        <Footer />
      </div>
    </el-container>
  </div>
</template>

<script>
  import {
    getInfo
  } from "@/api/login";
  import {
    listInfo,
    getpInfo,
    delInfo,
    addInfo,
    updateInfo,
    checkAuth
  } from "@/api/platform/info";
  import showInfo from "@/components/platform/showInfo";
  export default {
    name: "Platform",
    components: {
      showInfo,
    },
    data() {
      return {
        userInfo: {},
        templateCode: [],
        platformName: null,
        activeName: "all",
        tabCodes: "",
      };
    },
    watch: {},
    created() {
      let arr = this.$store.state.user.roles;
      let index = 0;
      arr.forEach((element) => {
        if ("store" === element || "ROLE_DEFAULT" === element) {
          index++;
        }
      });
      if (0 >= index) {
        this.$router.push("");
      }
      getInfo().then((respone) => {
        this.userInfo = respone.user;
      });
      this.getDicts("platform_trade_code").then((response) => {
        this.templateCode = response.data;
      });
    },
    methods: {

      layout() {
        this.$store.dispatch("LogOut").then(() => {
          let url = window.location.href;
          let arrS = url.split("platform");
          location.href = arrS[0] + "login";
        });
      },
      addss() {
        checkAuth().then(response => {
          let url = window.location.href;
          let arrS = url.split("platform");
          location.href = arrS[0] + "platform/add";
        })
      },
    },
  };
</script>
<style scoped lang="scss">
  .logins {
    background-color: #F6F7FB;
    width: 100%;
    height: 100%;
  }

  .header {
    padding: 21px 0 10px 0;
    padding-bottom: 10px;
  }

  .el-login-footer {
    margin: 40px 0 30px;
    width: 100%;
    font-family: Arial;
    letter-spacing: 1px;
  }

  .el-footer {
    left: 50%;
    bottom: 100px;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    background-color: #fff;

  }

  .main-one {
    height: 60px;
    background: #F5FAFF;
    width: 100%;
    border-radius: 10px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main-two {
    margin-top: 22px;
  }

  .store_list {
    height: 550px;
    width: 100%;
    overflow-y: auto;
  }
  
  .div-platform-name {
    font-size: 14px;
    margin-top: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .div-platform-name-item {
    max-width: 216px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    line-height: 23px;
  }

  .div-platform-name-item2 {
    display: inline-block;
    max-width: 216px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .div-platform-status {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .div-container {
    height: 100%;
    width: 100%;
  }

  .div-header {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-shadow: 0px 0px 35px 0px rgba(27, 46, 107, 0.06);
    .header_box {
      width: 1000px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .div-header-item {
    font-size: 16px;
    display: flex;
    align-items: center;
  }

  .div-header-item-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-header {
    padding: 0;
  }

  .main_box {
    border: 1px solid #eee;
    padding: 0px;
    width: 1000px;
    position: relative;
    border-radius: 4px;
    margin: 32px auto 0;
    background-color: #FFF;
    padding: 30px 34px 0;
    box-shadow: 0px 0px 15px 0px rgba(27, 46, 107, 0.03);
    border-radius: 10px;
  }
</style>
